<script setup lang="ts">
import CompetitionCard from './CompetitionMarketCard2.vue'
import type { Competition } from '../types/Competition';

// 接收 props
defineProps({
  competitions: {
    type: Array as () => Competition[], // 使用 TypeScript 类型断言
    default: () => [],
  },
})
</script>

<template>
  <div class="app-market">
    <div class="grid gap-5">
      <div v-for="competition in competitions" :key="competition.competitionId" class="col-span-12">
        <CompetitionCard
          :app="{
            top: competition.status === 'top' ? 1 : 0,
            projectId: competition.competitionId,
            title: competition.name,
            description: competition.description,
            date: competition.publisherTime,
            collections: competition.likeNum,
            views: competition.lookNum,
            shares: competition.shareNum,
            likeTrue: competition.likeTrue,
            competitionId: competition.competitionId,
          }"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>
